import React, {  useEffect, useState } from 'react'
//useEffect
/*
Effect Hook可以在函数组件中执行副作用操作
Effect可以告诉React组件需要在挂载完成,更新完成,卸载前执行某些操作
useEffect接受第一个参数是一个回调函数,在达到条件时,就会触发当前的回调函数
useEffect接收第二个参数是一个数组,
 -数组中传入state,则当前state发生改变时触发当前的effect中的回调函数
 -如果第二个参数是一个空数组,则useEffect回调函数只有在初始化阶段才执行
 -如果第二个参数不写,则无论是初始化还是更新时都会执行
useEffect的回调函数可以返回一个函数,当组件被卸载的时候或再次渲染时,会执行这个函数,用来做收尾工作
useEffect可以根据逻辑书写多次

*/
export default function App() {
  const [count, setCount] = useState(0)
  const [isHot,setisHot] = useState(true)

  const setCountHandle = () => {
    //不能是count++,const声明的是常量,count++就是把count改了,会报错
    setCount(count+1)
  }
  const setIsHotHandle = ()=>{
    setisHot(!isHot)
  }

  useEffect(()=>{
    console.log('第一个副作用操作执行了');
    return ()=>{
      console.log('第一个副作用操作的卸载函数执行了'+count);
    }
  },[isHot,count])
  useEffect(()=>{
    console.log('第二个副作用操作执行了');
  },[count])

  return (
    <div>
      <div>累加的值是{count}</div>
      <button onClick={setCountHandle}>点击累加</button>
      <div>今天的天气真的{isHot ? '热啊' : '冷啊'}</div>
      <button onClick={setIsHotHandle}>点击修改</button>
    </div>
  )
}
//Effect Hook可以在函数组件中执行副作用操作